<!doctype html>
<html>
  <head>
    <title>Introduction · Solid</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link
      rel="shortcut icon"
      type="image/x-icon"
      href="/favicon.ico?"
    />
    <link rel="stylesheet" href="/assets/css/main.css" />
  </head>

  <body>
    <header>
  <nav class="navbar" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
      <a class="navbar-item" href="/">
        <img
          src="/assets/img/solid-emblem.svg"
          alt="[Solid logo]"
        />
      </a>
      <a class="is-hidden-mobile navbar-item navbar-brand-name is-uppercase is-size-4" href="/">
        Solid
      </a>
    </div>
  
    <div class="navbar-menu">
      <div class="navbar-end">
        
          <a
            class="navbar-item is-size-6 is-size-5-tablet"
            href="/use-solid"
          >Use Solid</a>
        
          <a
            class="navbar-item is-size-6 is-size-5-tablet"
            href="/for-developers"
          >For Developers</a>
        
          <a
            class="navbar-item is-size-6 is-size-5-tablet"
            href="/for-enterprises"
          >For Enterprises</a>
        
          <a
            class="navbar-item is-size-6 is-size-5-tablet"
            href="/faqs"
          >FAQ</a>
        
      </div>
    </div>
  </nav>
</header>

    <div id="draft-warning"></div>
<script>
  if (document.location.hostname === 'localhost' || document.location.hostname === 'solid.github.io') {
    const draftWarningElement = document.getElementById('draft-warning')
    draftWarningElement.innerHTML = `
      <div class="message is-danger is-large" role="alert">
        <div class="message-body">
          You are currently viewing a draft version of the Solid website. If you are looking for reliable information, visit the live site at <a href="https://solidproject.org/for-developers/apps/first-app" title="The official Solid website">SolidProject.org</a>.
        </div>
      </div>
    `;
  }
</script>

    
  <nav id="breadcrumb" class="breadcrumb">
    <div class="container">
      <ul>
        <li>
          <a href="/">
            Home
          </a>
        </li>
        
        
          <li>
            <a href="/for-developers/">
              For Developers
            </a>
          </li>
        
        
        
          <li>
            <a href="">
              Introduction
            </a>
          </li>
        
      </ul>
    </div>
  </nav>


    <main>
      <div class="container">
  <div class="columns">
    <div class="column is-two-thirds">
      <article class="section content">
        <p>This tutorial assumes you are familiar with modern JavaScript and its ecosystem (e.g. you know how
and when to use tools like npm, Webpack, etc.), know how to write regular Web Apps, and are
interested in building one that reads and writes data to a Solid Pod.</p>

<p>It does not assume any prior knowledge of Semantic Web technologies, Linked Data, RDF, or even
knowing what those terms mean in the first place!</p>

<p>We’ll be building a note-taking app that can add notes to someone’s Pod, and can read existing
ones. If you’re so inclined, you can <a href="https://codesandbox.io/s/github/Vinnl/notepod/tree/5-writing-data/?module=%2Fsrc%2FApp.tsx">play around with the source code of the finished
app</a>
already.</p>

<p><img src="/assets/img/notepod-demo.gif" alt="Animated demo of the note-taking app." /></p>

<p><a href="/for-developers/apps/first-app/1-authentication">Start</a></p>

      </article>
    </div>
    <aside id="sidebar" class="column is-one-third is-hidden-mobile section">
      <div class="menu is-large">
        
          

<ul class="menu-list">
  
    
      <li>
        
          <a href="/for-developers/apps/first-app">Writing a Solid application</a>
        
        <!-- This is for categories with sub-categories -->
        
          <!-- List all posts in the category (no subcategories) -->
          <ul>
            
              <li>
                <a
                  href="/for-developers/apps/first-app"
                   class="is-active" 
                >Introduction</a></li>
            
              <li>
                <a
                  href="/for-developers/apps/first-app/1-authentication"
                  
                >Step 1: identifying the user</a></li>
            
              <li>
                <a
                  href="/for-developers/apps/first-app/2-understanding-solid"
                  
                >Step 2: Understanding Solid</a></li>
            
              <li>
                <a
                  href="/for-developers/apps/first-app/3-reading-data"
                  
                >Step 3: Reading data</a></li>
            
              <li>
                <a
                  href="/for-developers/apps/first-app/4-data-model"
                  
                >Step 4: Setting up a Data Model</a></li>
            
              <li>
                <a
                  href="/for-developers/apps/first-app/5-writing-data"
                  
                >Step 5: Writing data & what's next</a></li>
            
          </ul>
        
      </li>
                    <a href="/for-developers/apps/vocabularies"></a>
    
  
    
      <li>
        
          <a href="/for-developers/apps/vocabularies">Vocabularies</a>
        
      </li>
    
  
    
      <li>
        
          <a href="/for-developers/apps/common-patterns">Common patterns</a>
        
      </li>
    
  
    
      <li>
        
          <a href="/for-developers/apps/tools">Tools and libraries</a>
        
      </li>
    
  
</ul>
        
      </div>
    </aside>
  </div>
</div>

    </main>
    <footer id="footer" class="footer">
  <div class="container">
    <div class="columns">
      
        <div class="column">
          <ul>
            <li>
              
                <a class="title is-size-5" href="/">Home</a>
              
            </li>
            
              <li>
                
                  <a class="is-size-5" href="/use-solid">Use Solid</a>
                
              </li>
            
              <li>
                
                  <a class="is-size-5" href="/implement">Implement Solid</a>
                
              </li>
            
              <li>
                
                  <a class="is-size-5" href="/team">Team</a>
                
              </li>
            
              <li>
                
                  <a class="is-size-5" href="/faqs">FAQs</a>
                
              </li>
            
          </ul>
        </div>
      
        <div class="column">
          <ul>
            <li>
              
                <span class="title is-size-5">What's New</span>
              
            </li>
            
              <li>
                
                  <a class="is-size-5" href="/this-week-in-solid">This week in Solid</a>
                
              </li>
            
              <li>
                
                  <a class="is-size-5" href="/press">Press</a>
                
              </li>
            
              <li>
                
                  <a class="is-size-5" href="/events">Solid events</a>
                
              </li>
            
          </ul>
        </div>
      
        <div class="column">
          <ul>
            <li>
              
                <a class="title is-size-5" href="/for-developers">For Developers</a>
              
            </li>
            
              <li>
                
                  <a class="is-size-5" href="/for-developers/apps">Writing apps</a>
                
              </li>
            
              <li>
                
                  <a class="is-size-5" href="/for-developers/pod-server">Running a Pod server</a>
                
              </li>
            
              <li>
                
                  <a class="is-size-5" href="/funding">Funding</a>
                
              </li>
            
              <li>
                
                  <a class="is-size-5" href="https://forum.solidproject.org">Forum</a>
                
              </li>
            
          </ul>
        </div>
      
        <div class="column">
          <ul>
            <li>
              
                <span class="title is-size-5">More</span>
              
            </li>
            
              <li>
                
                  <a class="is-size-5" href="/standardisation">Standardisation</a>
                
              </li>
            
              <li>
                
                  <a class="is-size-5" href="/license">License</a>
                
              </li>
            
              <li>
                
                  <a class="is-size-5" href="/logo-usage-guidelines">Logo usage guidelines</a>
                
              </li>
            
          </ul>
        </div>
      
    </div>
  </div>

  <nav class="navbar" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
      <a class="navbar-item" href="/">
        <img
          src="/assets/img/solid-emblem.svg"
          alt="[Solid logo]"
        />
      </a>
      <a class="navbar-item" href="mailto:info@solidproject.org">
        info@solidproject.org
      </a>
      <a class="navbar-item" href="https://github.com/solid/" title="Solid on GitHub">
        <span class="image is-24x24">
          <img
            src="/assets/img/fontawesome-free-5.11.2-web/svgs/brands/github.svg"
            alt="GitHub"
            class="brand-icon"
          />
        </span>
      </a>
      <a class="navbar-item" href="https://twitter.com/project_solid" title="Solid on Twitter">
        <span class="image is-24x24">
          <img
            src="/assets/img/fontawesome-free-5.11.2-web/svgs/brands/twitter.svg"
            alt="Twitter"
            class="brand-icon"
          />
        </span>
      </a>
    </div>
  </nav>
</footer>

  </body>


</html>
